import React, { Component } from 'react';
import { InputItem, WhiteSpace, Toast } from 'antd-mobile';
import ReactDOM from 'react-dom';
import ImageCode from '../component/ImageCode';
import './style/registered.css';

class Registered extends Component {

    constructor(props) {
        super(props);
        this.state = {
            imageCodeUrl: '', //验证码图片
            type1: 'password',//键盘1类型
            type2: 'password',//键盘2类型
            isAgreen: false, //是否同意条款
            disable: true, //是否警用滑动验证
            phoneNum: '' //手机号
        }
    }

    componentDidMount() {
        const $this = ReactDOM.findDOMNode(this);
        const _phoneInput = $this.querySelectorAll('.am-list-item .am-input-control input');
        if (_phoneInput) {
            [..._phoneInput].forEach((v) => {
                v.style.fontSize = '1.3rem';
            });
        }

        //模拟请求验证码
        this.setState({
            imageCodeUrl: require('../compile/img/login/imageCodeUrl.png'),
            imageWidth: document.body.clientWidth * 0.84
        })
    }


    goback = () => {
        this.props.history.goBack();
    }

    //显示密码
    changeInputType1 = () => {
        this.setState({
            type1: this.state.type1 === 'text' ? 'password' : 'text'
        })
    }

    //显示密码
    changeInputType2 = () => {
        this.setState({
            type2: this.state.type2 === 'text' ? 'password' : 'text'
        })
    }

    //发送验证码
    sendIdentifying = () => {
        if (this.imageCode.state.status === 2) {

        } else {
            Toast.fail('滑动验证', 1)
        }
    }
    //是否同意协议
    agreen = () => {
        this.setState({
            isAgreen: !this.state.isAgreen
        });
    }

    //获取手机号
    getPhoneNum = (v) => {
        v = v.replace(new RegExp(" ", "gm"), '');
        console.log(v);
        this.setState({
            phoneNum: v,
            disable: v.length === 11 ? false : true
        });
    }

    //前往登录
    goLogin = () => {
        this.props.history.push({ pathname: "/login" });
    }

    render() {
        return (
            <div className='registered'  >
                <div className='registeredNavarBar'>
                    <div onClick={this.goback} className='registeredNavarBarLeft'>
                        <img width='20rem' height='20rem' alt='' src={require('./img/login/left.png')}></img>
                    </div>
                    <div className='registeredNavarBarTitle' >注册</div>
                    <div className='registeredNavarBarLeft'></div>
                </div>
                <div className='registeredLogo'>
                    <img width='80rem' height='80rem' alt='' src={require('./img/login/logo.png')}></img>
                </div>
                <div className='registeredForm'>
                    <InputItem
                        style={{ textAlign: "left" }}
                        type="phone"
                        placeholder="请输入手机号"
                        clear={true}
                        labelNumber={0}
                        onChange={this.getPhoneNum}
                    > </InputItem>
                    <WhiteSpace size='xl'></WhiteSpace>
                    <ImageCode
                        ref={v => this.imageCode = v}
                        imageUrl={this.state.imageCodeUrl}
                        imageWidth={this.state.imageWidth}
                        disable={this.state.disable}
                        phoneNum={this.state.phoneNum}
                    ></ImageCode>
                    <WhiteSpace size='lg'></WhiteSpace>
                    <div style={{ position: 'relative' }}>
                        <InputItem
                            type="number"
                            placeholder="请输入验证码"
                            style={{ textAlign: "left" }}
                            labelNumber={0}
                            maxLength={4}
                        > </InputItem>
                        <div onClick={this.sendIdentifying} className='registeredFormInputItemExtr'>
                            发送验证码
                       </div>
                    </div>
                    <div style={{ position: 'relative' }}>
                        <InputItem
                            type={this.state.type1}
                            placeholder='请输入密码'
                            style={{ textAlign: "left" }}
                            labelNumber={0}
                        > </InputItem>
                        <div onClick={this.changeInputType1} className='registeredFormInputItemExtrImag'>
                            {
                                this.state.type1 === 'password' ? <img alt='' src={require('./img/login/show.png')}></img> :
                                    <img alt='' src={require('./img/login/closeeay.png')}></img>
                            }
                        </div>
                    </div>
                    <div style={{ position: 'relative' }}>
                        <InputItem
                            type={this.state.type2}
                            style={{ textAlign: "left" }}
                            placeholder="请确认密码"
                            labelNumber={0}
                            autoAdjustHeight={true}
                        > </InputItem>
                        <div onClick={this.changeInputType2} className='registeredFormInputItemExtrImag'>
                            {
                                this.state.type2 === 'password' ? <img alt='' src={require('./img/login/show.png')}></img> :
                                    <img alt='' src={require('./img/login/closeeay.png')}></img>
                            }
                        </div>
                    </div>
                </div>
                <div className='registeredSubmit'>
                    注册
                </div>
                <div className='registeredClause'>
                    <div className='registeredClauseLeft'>
                        {this.state.isAgreen ? <img onClick={this.agreen} alt='' width='14rem' height='14rem' src={require('./img/login/agree.png')}></img> :
                            <img onClick={this.agreen} alt='' width='14rem' height='14rem' src={require('./img/login/disAgree.png')}></img>
                        }<span>同意</span>
                        <span style={{ color: '#F98743' }}>《注册协议》</span>
                    </div>
                    <div className='registeredClauseRight'>
                        <span>已有账号？</span>
                        <span onClick={this.goLogin} style={{ color: '#F98743' }}> 去登陆</span>
                    </div>
                </div>
            </div>
        )
    }

}

export default Registered;